<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    // onclick    鼠标单击 ( 左键  按下并松开)
    // ondblclick 鼠标(左键)双击

    // onmousedown  鼠标按键被按下  (左:0 中:1 右:2 侧键: 3 4)
    // onmouseup    鼠标按键松开
    // onousemove   鼠标移动

    // onmouseover  鼠标划入
    // onmouseout   鼠标移出

    var box = document.querySelector(".box");

    // box.onclick = function(){
    //     console.log("box被单击");
    // }

    // box.ondblclick = function(){
    //     console.log("box被双击");
    // }

    // 事件流程
    // 1. 先绑定事件  
    // 2. 浏览器侦听到事件被触发之后执行对应的事件函数  => 并传入事件发生时相关的信息 => 事件对象 (什么时间 发送了什么类型的事件 发送在谁身上 -> 键盘相关的按键 鼠标相关的按键 鼠标位置等) 
    // box.onmousedown = function(e){  // 形参 =>  事件对象
    //     console.log("鼠标按键被按下",e.button); // (左:0 中:1 右:2 侧键: 3 4)
    // }
    
    // box.onmouseup = function(e){  // 形参 =>  事件对象
    //     console.log("鼠标按键被松开",e.button); // (左:0 中:1 右:2 侧键: 3 4)
    // }

    // box.onmousemove = function(e){  // 形参 =>  事件对象
    //     console.log("鼠标按键被松开"); 
    // }


    // 鼠标移入
    box.onmouseover = function(){
        console.log("鼠标划入");
        this.style.backgroundColor = "red";
    }
    
    // 鼠标移出
    box.onmouseout = function(){
        console.log("鼠标移出");
        this.style.backgroundColor = "#6ff";
    }





</script>
</html>